<template>
    <div class="login">
        <div class="login-mark">
            <div class="mark-logo">
                <img src="./login-logo.png" alt="">
            </div>
            <el-form ref="form" :model="user" :rules="rules" class="mark-form">
                <el-form-item prop="account">
                    <el-input
                            v-model="user.account"
                            prefix-icon="el-icon-user-solid"
                            placeholder="请输入账号"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                            v-model="user.password"
                            prefix-icon="el-icon-unlock"
                            placeholder="请输入密码"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="agree">
                    <el-checkbox v-model="user.agree" class="form-protocol">我已阅读并同意用户协议和隐私条款</el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button
                            class="login-btn"
                            type="primary"
                            @click="onSignIn()"
                            :loading="loading"
                    >登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "home",
        data() {
            return {
                user: {
                    account:'123123123',
                    password:'1231234',
                    name:'何止',
                    agree:false
                },
                rules:{
                    account: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { pattern: /^\d+$/, message: '账号必须为纯数字', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
                    ],
                    agree:[
                        {
                            validator:(rule, value, callback)=>{
                                if (value) {
                                    // 验证通过
                                    callback()
                                } else {
                                    // 验证失败
                                    callback(new Error('请同意用户协议'))
                                }
                            },
                            trigger:'change'
                        }
                    ]
                },
                loading:false,//登入按钮是否禁用
            }
        },
        methods: {
            onSignIn() {
                //登入前先进性表单验证
                this.$refs["form"].validate((valid)=>{
                    //验证失败，返回
                    if (!valid) {
                        return
                    }
                    // 验证通过，请求登录
                    this.signIn()
                })
            },
            signIn(){
                //发送请求的时候登入按钮禁用
                this.loading = true
                if(this.user.account === this.$store.state.serveMember.account && this.user.password === this.$store.state.serveMember.password){
                    //成功登入
                    this.$message.success('恭喜你，登入成功')
                    this.loading = false//解除登入禁用
                    //存储本地信息
                    window.localStorage.setItem('user',JSON.stringify(this.$store.state.serveMember))
                    //跳转到首页
                    this.$router.push({
                        name:"home"
                    })
                }else{
                    //登入失败
                    this.$message.error('对不起，登入失败');
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .login{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: url("./login-bz.jpg") no-repeat;
        background-size: cover;
        .login-mark{
            height: 350px;
            width: 400px;
            margin: 150px auto;
            background: #fff;
            position: relative;
            display: flex;
            flex-direction: column;
            .mark-logo{
                width: 100%;
                height: 80px;
                position: absolute;
                img{
                    display: block;
                    width: 180px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%);
                }
            }
            .mark-form{
                width: 100%;
                margin-top: 80px;
                box-sizing: border-box;
                padding: 0 40px;
                .form-protocol{
                    font-size: 15px;
                }
                .login-btn{
                    width: 100%;
                }
            }
        }
    }

</style>
